<template>
  <div>
    <div class="item"
         @click="showChildren=!showChildren"
         :style="{paddingLeft:item.md_tier*14+'px'}">
      <img src="@/assets/sj.png"
           :class="['img_size',{'visib':!item.metadata},{'rotat':showChildren}]">
      <img src="@/assets/file.png"
           class="img_size">
      <span> {{item.md_title}} </span>
      <img src="@/assets/jia.png"
           @click.stop="addItem"
           v-if="item.md_tier==0"
           class="img_size">
    </div>
    <div v-show="showChildren && item.metadata">
      <treedata v-for="item2 in item.metadata"
                :item="item2"
                :key="item2.md_id">
      </treedata>
    </div>
  </div>
</template>
<script>
import EventBus from "@/utils/EventBus";
export default {
  name: "treedata",
  props: ['item'],
  data() {
    return {
      showChildren: false
    }
  },
  methods: {
    addItem() {
      EventBus.$emit("addItem")
    }
  }
}
</script>
<style   scoped>
.item {
  height: 37px;
  line-height: 37px;
  color: #000;
  cursor: pointer;
}
.img_size {
  width: 15px;
  height: 15px;
  margin-right: 5px;
}
.rotat {
  transform: rotate(90deg);
}
</style>